<template>
    <div class="userCell" @click="toEdit">
        <div class="headImg">
            <img :src="user.avatar" alt="">
        </div>
        <div class="personData">
            <div class="topData">
                <span class="name">{{user.name}}</span>
                <span><img src="./image/vip.png"></span>
                <span>{{level}}</span>
            </div>
            <div class="centerData">
                <span>{{user.code}}</span>
                <span>{{user.mobile?user.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2'):0}}</span>
            </div>
            <div class="downData">
                <span>经验值: {{num?num:0}}</span>
            </div>
        </div>
        <div class="sign" v-if="!user.mobile">完善信息</div>
    </div>
</template>

<script>
    export default {
        name : "index",
        props:{
            user: Object,
            account:Array,
            level:String,
            topMobile:String
        },
        data(){
            return {
            }
        },
        methods:{
            toEdit(){
                let topPhone = this.topMobile
                if (this.user.mobile){
                    topPhone = ''
                }
                this.$router.push({
                    path:'/my/edit',
                    query:{
                        name:this.user.name,
                        mobile:this.user.mobile,
                        topMobile:topPhone,
                        back:true
                    }
                })
            }
        },
        computed:{
            num(){
                let num
                this.account.forEach(item=>{
                    if(item.type==4){
                        num= item.amount
                    }
                })
                return num
            },

        }
    }
</script>

<style scoped lang="stylus">
.userCell
    padding-top 15px
    display flex
    justify-content space-between
    align-items center
    color #fff
    .headImg
        img
            width 58px
            height 58px
            border-radius 50%
    .personData
        flex 1
        padding-left 20px
        .topData
            font-size 12px
            font-weight 200
            .name
                font-size 15px
                line-height 1.2
                font-weight bold
                max-width 120px
                display inline-block
                white-space nowrap
                overflow hidden
                text-overflow ellipsis
            img
                width 9px
                height 9px
                margin-left 5px
                margin-right 3px
        .downData
            font-size 9px
            font-weight 200
            span
                /*padding 1px 3px*/
                margin-right 5px
        .centerData
            font-size 11px
            padding 10px 0
            span
                margin-right 15px
    .sign
        font-size 10px
        width 90px
        height 40px
        color #666666
        background url("./image/signImg.png") no-repeat
        background-size 90px 40px
        display flex
        justify-content center
        align-items center
</style>